<template>
  <div>
    <!-- <SecHeader /> -->
    <div class="content">
      <div class="left">
        <LeftUp :base="baseInfo" class="left_up" />
        <LeftCenter :base="baseInfo" class="left_center" />
        <LeftDown :base="baseInfo" class="left_down" />
      </div>
      <div class="center">
        <CenterUp @select="select" class="center_up" />
        <CenterDown :base="baseInfo" class="center_down" />
      </div>
      <!-- <div :id="id" class="container-map"></div> -->
      <Amap ref="amapRef" @complete="complete" @click="mapClick" class="container-map"></Amap>
      <div class="right">
        <RightUp :base="baseInfo" class="right_up" />
        <RightCenter :base="baseInfo" class="right_center" />
        <RightDown class="right_down" />
      </div>
    </div>

    <img src="../../assets/bg2.png" class="bgimg" />
  </div>
</template>

<script setup>
import { message } from "ant-design-vue";
import SecHeader from "../../components/SecHeader.vue";

import LeftUp from "./component/LeftUp.vue";
import LeftCenter from "./component/LeftCenter.vue";
import LeftDown from "./component/LeftDown.vue";
import RightUp from "./component/RightUp.vue";
import RightCenter from "./component/RightCenter.vue";
import RightDown from "./component/RightDown.vue";
import CenterDown from "./component/CenterDown.vue";
import CenterUp from "./component/CenterUp.vue";

import { ref, onMounted } from "vue";
import http from "@/api/http";
import { env } from "@/utils/env";

import AMapLoader from "@amap/amap-jsapi-loader";
import { useBaseStore } from "@/stores/base";
import { useDeviceStore } from "@/stores/device";
import { useLandStore } from "@/stores/land";
import { useRouter } from "vue-router";
const baseStore = useBaseStore()
const deviceStore = useDeviceStore()
const landStore = useLandStore()
let baseInfo = ref({ imageUrl: [] });
let taskStatist = ref({});
const router = useRouter()

const id = ref("container" + Math.random());
const amapRef = ref()
let map = null;

let landMap = ref([]);
let mainMap = ref([]);

onMounted(async () => {
  console.log('BaseOverview onMounted...')


});

const getLandList = async () => {
  if (!baseInfo.value) {
    return
  }
  if (!baseInfo.value.id) {
    return
  }
  map.clearMap();
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/base/land/list",
    method: "get",
    params: {
      baseId: baseInfo.value.id,
      // year: new Date().getFullYear()
    },
  });


  landStore.landList = res.data
  for (let item of res.data) {
    let newmarker = new AMap.Marker({
      position: [item.lng, item.lat],
      anchor: 'bottom-center',
      map: map
    });
    let text = new AMap.Text({
      text: item.name,
      anchor: 'center', // 设置文本标记锚点
      angle: 0,
      offset: new AMap.Pixel(0, -50),
      style: {
        'text-align': 'center', background: '#00bfe0', border: 'none', color: '#fff', 'font-size': '16px', 'box-shadow': '0 0 5px 0 rgba(0, 0, 0, 0.5)', padding: '5px 10px'
      },
      position: [item.lng, item.lat],
      map
    });
    // 绘制地块范围
    if (item.scope) {
      let path = JSON.parse(item.scope)
      
      path = path.map((obj) => {
        return [obj.lng, obj.lat];
      });
      let polygon = new AMap.Polygon({
        path: path,
      })
      map.add(polygon);
    }

    const clickHandler = (e, d) => {
      let weather = ['', '无', '台风', '暴雨']

      var content = `
      <style>
      .land-text-item{color: #ffffff; margin: 0px 10px 10px 10px; width: 40%;}
      </style>
        <div style="background: #154c5c;border-radius: 5px;border: 1px solid #24ab9a;z-index: 99; font-size:16px">
          <div style="margin: 10px;display: flex; justify-content: space-between;">
            <div style="font-weight: bold;color: #ffffff;text-shadow: 0px 2px 5px #003f85;padding: 0 15px 0 0;">${item.name}</div>
            <div onclick="goBaseOverview1('${item.serialNo}')" style="padding:4px 10px;line-height: 17px;text-align: center;background: #09242c;border-radius: 5px;font-family: Source Han Sans CN;font-weight: bold;color: #2cd7bc;cursor: pointer; font-size:14px;">地块详情</div>
          </div>
          <div style="display: flex; flex-flow:row wrap ; width:360px;">
          <div class="land-text-item">所属基地：${item.baseName ? item.baseName : ''}</div>
          <div class="land-text-item">地块面积：${item.acreage}亩</div>
          <div class="land-text-item">当前作物：${item.medicinalName ? item.medicinalName : ''}</div>
          </div>
          <div style="font-weight: bold;color: #ffffff;text-shadow: 0px 2px 5px #003f85;padding: 0 15px 10px 15px;">适宜性</div>
          <div style="display: flex; flex-flow:row wrap ; width:360px;">
          <div class="land-text-item">土壤：${item.soilType ? '适宜' : '不适宜'}</div>
          <div class="land-text-item">气候：${item.climateType ? '适宜' : '不适宜'}</div>
          <div class="land-text-item">病虫害：${item.insectPestType ? '适宜' : '不适宜'}</div>
          <div class="land-text-item">极端天气：${weather[item.weatherType] ? weather[item.weatherType] : '无'}</div>
            </div>
          </div>
      `;

      var infoWindow = new AMap.InfoWindow({
        anchor: "top-center",
        isCustom: true,
        content: content,
      });
      infoWindow.open(map, [item.lng, item.lat]);
    }

    AMap.Event.addListener(newmarker, "click", clickHandler);
    AMap.Event.addListener(text, "click", clickHandler);
  }


  map.setFitView(undefined, false, [160, 160, 160, 160]);
}

const getDeviceList = async () => {
  if (!baseInfo.value) {
    return
  }
  map.clearMap();

  for (let item of deviceStore.deviceList) {
    var randomNumber = (Math.floor(Math.random() * 200) - 100) / 100000;

    let position = [baseInfo.value.lng + randomNumber, baseInfo.value.lat + randomNumber]

    let newmarker = new AMap.Marker({
      position: position,
      anchor: 'bottom-center',
      map: map
    });
    let text = new AMap.Text({
      text: item.name,
      anchor: 'center', // 设置文本标记锚点
      angle: 0,
      offset: new AMap.Pixel(0, -50),
      style: {
        'text-align': 'center', background: '#00bfe0', border: 'none', color: '#fff', 'font-size': '16px', 'box-shadow': '0 0 5px 0 rgba(0, 0, 0, 0.5)', padding: '5px 10px'
      },
      position: position,
      map
    });

    const clickHandler = (e, d) => {
      let weather = ['', '无', '台风', '暴雨']

      var content = `
        <div style="background: #154c5c;border-radius: 5px;border: 1px solid #24ab9a;z-index: 99; font-size:16px">
          <div style="margin: 10px;display: flex; justify-content: space-between;">
            <div style="font-weight: bold;color: #ffffff;text-shadow: 0px 2px 5px #003f85;padding: 0 15px 0 0;">${item.name}</div>
          </div>
          <div style="color: #ffffff; margin: 10px;">${deviceStore.getCategoryName(item.category)}</div>
         
          </div>
      `;

      var infoWindow = new AMap.InfoWindow({
        anchor: "top-center",
        isCustom: true,
        content: content,
      });
      infoWindow.open(map, position);
    }

    AMap.Event.addListener(newmarker, "click", clickHandler);
    AMap.Event.addListener(text, "click", clickHandler);
  }


  map.setFitView(undefined, false, [160, 160, 160, 160]);

}
const mapClick = () => {
  map.clearInfoWindow();
}
const complete = async (e) => {
  map = e
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/base/overview",
    method: "get",
    params: { serialNo: baseStore.base.serialNo },
  });
  if (res.data) {
    res.data.serialNo = baseStore.base.serialNo
    baseInfo.value = res.data;
    baseStore.base = res.data
    getLandList()
  } else {
    let obj = {
      id: 0,
      name: baseStore.base.name,
      serialNo: baseStore.base.serialNo,
      imageUrl: []
    }
    baseInfo.value = obj;
    baseStore.base = obj
  }
}


window.goBaseOverview1 = async (serialNo) => {

  const hide = message.loading('加载中..', 0);
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/base/land/info",
    method: "get",
    params: {
      serialNo: serialNo
    },
  });
  hide()
  baseStore.base = {
    id: res.data.baseId,
    name: res.data.baseName,
    serialNo: res.data.baseSerialNo
  }
  if (res.data) {
    landStore.land = res.data
  }


  router.push({
    name: "DigitalPlanting",
  });
}



const select = (type) => {
  if (type == 'land') {
    getLandList()
  } else {
    getDeviceList()
  }
};
</script>

<style scoped lang="scss">
.bgimg {
  // width: 100%;
  // height: 100%;
  height: vh(800);
  width: vw(1440);
  z-index: 5;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.container-map {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  box-shadow: 0 0 vw(80) vw(40) rgba(30, 73, 98, 1) inset;

  z-index: 0;
}

.content {
  display: flex;
  justify-content: space-between;
  position: relative;
  /* padding: 10px; */
}

.left {
  width: 27%;
  z-index: 10;
}

.left_up {
  margin: vh(10) vw(10);
  height: vh(230);
}

.left_center {
  margin: vh(10) vw(10);
  height: vh(230);
}

.left_down {
  margin: vh(10) vw(10);
  height: vh(230);
}

.center {
  width: 46%;
  position: relative;
}

.center_up {
  // height: vh(475);
  margin: vh(10) vw(10);
  z-index: 10;
}

.center_down {
  height: vh(230);
  margin: vh(10) vw(10);
  z-index: 10;

  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.right {
  width: 27%;
  z-index: 10;
}

.right_up {
  margin: vh(10) vw(10);
  height: vh(230);
}

.right_center {
  margin: vh(10) vw(10);
  height: vh(230);
}

.right_down {
  margin: vh(10) vw(10);
  height: vh(230);
}
</style>